<!--提供方管理页面-->

<template>
    <div class="thisBody">
        <el-row :gutter="24" class="toolbar total marginTop30px">
            <el-col :span="3"><div class="grid-content bg-purple">接口总数：{{allServiceNum}}</div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">提供方总数：{{allProviderNum}}</div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">请求方总数：{{allRequesterNum}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">历史调用次数：{{allInvoLogNum}}</div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">今日调用次数：{{todayInvoLogNum}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">总成功调用次数：{{allSuccInvoNum}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">总失败调用次数：{{allFailInvoNum}}</div></el-col>
        </el-row>
        <el-row class="">
            <el-col :span="24">
                <!--列表、table-->
                <el-table :data="countByLoctionData" border stripe style="width: 100%">
                    <el-table-column prop="loction" label="专网名称"></el-table-column>
                    <el-table-column prop="apiLocationSum" label="服务个数"></el-table-column>
                    <el-table-column prop="requestSum" label="请求方数"></el-table-column>
                    <el-table-column prop="serviceSum" label="总使用次数"></el-table-column>
                    <el-table-column prop="nowDay" label="当日使用次数"></el-table-column>
                    <el-table-column prop="nowWeek" label="本周使用次数"></el-table-column>
                    <el-table-column prop="nowMonth" label="本月使用次数"></el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <card class="marginTop30px">
            <el-row>
                <el-col :span="12">
                    <div id="ser_countByLoction_chart" :style="{width: '500px', height: '300px'}"></div>
                </el-col>
                <el-col :span="12">
                    <div id="req_countByOrganization_char" :style="{width: '500px', height: '300px'}"></div>
                </el-col>
            </el-row>
        </card>
        <card class="marginTop30px">
            <el-row>
                <el-col :span="24">
                    <div id="month_chart" :style="{width: '100%', height: '300px'}"></div>
                </el-col>
            </el-row>
        </card>
        <card class="marginTop30px">
            <el-row>
                <el-col :span="12">
                    <div id="day_request_chart" :style="{width: '600px', height: '300px'}"></div>
                </el-col>
                <el-col :span="12">
                    <div id="day_service_chart" :style="{width: '600px', height: '300px'}"></div>
                </el-col>
            </el-row>
        </card>
    </div>
</template>
<script>
    import {invoLog_countByCondition, pro_countByCondition, req_countByCondition, ser_countByCondition,ser_countByLoction,req_countByOrganization,req_monthlyRequesterCount,req_dayRequesterCount,req_dayServiceCount} from '../api/api.js';
    import utils from '../api/utils.js';
    export default {
        data() {
            return {
                allServiceNum:0,// 所有接口总数
                allInvoLogNum:0,// 所有调用日志数量
                allRequesterNum:0,// 所有请求者数量
                allProviderNum:0,// 所有提供者数量
                todayInvoLogNum:0,// 今日调用日志数量
                allSuccInvoNum:0,// 所有调用成功的数量
                allFailInvoNum:0,// 所有调用失败的数量
                todaySuccInvoNum:0,// 今日成功次数
                todayFailInvoNum:0,// 今日失败次数

                countByLoctionData:[],
            };
        },
        methods: {
            formatCommDatas(row, column){
                return utils.formatCommDatas(row,column);
            },
            get_ser_countByLoction_list(){
                let params = {
					pageNum: 1,
					pageSize: 100
				};
				//NProgress.start();
				ser_countByLoction(params).then(function(result){
                    this.countByLoctionData = result.data.list;
                    this.drawLine();
				}.bind(this)).catch(function (error) {
					console.log(error);
				}.bind(this));
            },
            drawLine(){
                let data_classify = [];
                if(this.countByLoctionData.length>0){
                    this.countByLoctionData.forEach(obj => {
                        data_classify.push({value:obj.serviceSum,name:obj.loction});
                    });
                }
                // 基于准备好的dom，初始化echarts实例
                let ser_countByLoction_chart = this.$echarts.init(document.getElementById('ser_countByLoction_chart'))
                // 绘制图表
                ser_countByLoction_chart.setOption({
                    title : {
                        text: '分类请求总数比例图',
                        x:'center',
                        textStyle:{
                            color: 'purple'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    calculable : true,
                    series : [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:data_classify
                        }
                    ],
                    color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']
                });

                let data_request = [];
                let params = {
					pageNum: 1,
					pageSize: 100
				};
				//NProgress.start();
				req_countByOrganization(params).then(function(result){
                    result.data.list.forEach(obj => {
                        data_request.push({value:obj.organizationSum,name:obj.organization});

                        let req_countByOrganization_char = this.$echarts.init(document.getElementById('req_countByOrganization_char'))
                        // 绘制图表
                        req_countByOrganization_char.setOption({
                            title : {
                                text: '请求方总数比例图',
                                x:'center',
                                textStyle:{
                                    color: 'purple'
                                }
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            calculable : true,
                            series : [
                                {
                                    name:'访问来源',
                                    type:'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    data:data_request
                                }
                            ],
                            color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']
                        });
                    });
				}.bind(this)).catch(function (error) {
					console.log(error);
                }.bind(this));

                req_monthlyRequesterCount(params).then(function(result){
                    let rqArr = [];
                    let ydxxwArr = [];
                    let ganwArr = [];
                    let qtwArr = [];
                    result.data.data.forEach(obj => {
                        rqArr = obj.rqArr;
                        ydxxwArr = obj.ydxxwArr;
                        ganwArr = obj.ganwArr;
                        qtwArr = obj.qtwArr;
                        let month_chart = this.$echarts.init(document.getElementById('month_chart'))
                        // 绘制图表
                        month_chart.setOption({
                            title: {
                                text: '每月请求数总量',
                                textStyle:{
                                    color: 'purple'
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['移动信息网','公安内网','未知网络']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: rqArr
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'移动信息网',
                                    type:'line',
                                    stack: '总量',
                                    data:ydxxwArr
                                },
                                {
                                    name:'公安内网',
                                    type:'line',
                                    stack: '总量',
                                    data:ganwArr
                                },
                                {
                                    name:'未知网络',
                                    type:'line',
                                    stack: '总量',
                                    data:qtwArr
                                }
                            ],
                            color: ['rgb(131,175,155)','rgb(249,205,173)','rgb(200,200,169)','rgb(254,67,101)','rgb(252,157,154)']
                        });
                    });
				}.bind(this)).catch(function (error) {
					console.log(error);
                }.bind(this));


                //重新修改参数配置
                params = {
                    pageNum: 1,
                    pageSize: 5,
                    type:1

                };
                //请求方统计
                req_dayRequesterCount(params).then(function(result){
                    let Byte = [];
                    let typeName = [];
                    let par = 0;
                    result.data.list.forEach(obj => {
                        Byte.push(obj.interfaceByte);
                        typeName.push(obj.typeName) ;
                        if(par < obj.interfaceByte){
                            par = obj.interfaceByte;
                        }
                    });

                    let month_chart = this.$echarts.init(document.getElementById('day_request_chart'))

                    // 绘制图表
                    month_chart.setOption({
                        title: {
                            text: '请求方流量Top5'
                        },
                        legend: {
                            data: ['单位：byte']
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: 'byte',
                            max:par*1.1
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            data: typeName,
                        },
                        series: [
                            {
                                name: 'byte：',
                                type: 'bar',
                                data: Byte
                            }

                        ],
                        color: ['#33CCFF']
                    });

                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));

                //重新修改参数配置
                params = {
                    pageNum: 1,
                    pageSize: 5,
                    type:2

                };
                //服务方统计
                req_dayServiceCount(params).then(function(result){


                    let Byte = [];
                    let typeName = [];
                    let par = 0;
                    result.data.list.forEach(obj => {
                        Byte.push(obj.interfaceByte);
                        typeName.push(obj.typeName) ;
                        if(par < obj.interfaceByte){
                            par = obj.interfaceByte;
                        }
                    });

                    let month_chart = this.$echarts.init(document.getElementById('day_service_chart'))
                    // 绘制图表
                    month_chart.setOption({
                        title: {
                            text: '服务方流量Top5'
                        },
                        legend: {
                            data: ['单位：byte']
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: 'byte',
                            max:par*1.1
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            data: typeName,
                        },
                        series: [
                            {
                                name: 'byte：',
                                type: 'bar',
                                data: Byte
                            }

                        ],
                        color: ['#33CCFF']
                    });
                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));
            }
        },
        computed: {

        },
        created() {
            let _this = this;

            ser_countByCondition({}).then(res => {// 所有接口总数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allServiceNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            pro_countByCondition({}).then(res => {// 所有提供者数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allProviderNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            req_countByCondition({}).then(res => {// 所有请求者数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allRequesterNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });


            invoLog_countByCondition({}).then(res => {// 所有调用日志数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allInvoLogNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });


            invoLog_countByCondition({"startTime":new Date(),"endTime":new Date()}).then(res => {// 今日调用日志数量
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.todayInvoLogNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });


            invoLog_countByCondition({"resultStatus":1}).then(res => {// 总成功调用次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allSuccInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            invoLog_countByCondition({"resultStatus":0}).then(res => {// 总失败调用次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.allFailInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            invoLog_countByCondition({"resultStatus":1,"startTime":new Date(),"endTime":new Date()}).then(res => {// 今日成功次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.todaySuccInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });

            invoLog_countByCondition({"resultStatus":0,"startTime":new Date(),"endTime":new Date()}).then(res => {// 今日失败次数
                if(res.data.code!='S100101'){
                    console.log(res.data);
                    this.$message.warning('系统异常 ');
                }else{_this.todayFailInvoNum=res.data.data}
            }).catch(function (error) {
                console.log(error);
                this.$message.warning('系统异常 ');
            });
        },
        mounted(){
            this.get_ser_countByLoction_list();
        }

    };
</script>
 <style>
    .thisBody{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .grid-content {
        margin-bottom: 20px;
        min-height: 36px;
    }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .total{
    /* margin-left: 120px !important; */
    text-align: center;
    line-height: 40px;
  }
</style>